iT邦幫忙

2025 iThome 鐵人賽

DAY 4
0
Modern Web

WebXR未來新視界:Babylon.js打造Web的VR/AR/XR體驗系列 第 4

[Day04] 如何開發VR/AR/XR? 要用Unity還是可用網頁WebXR?

  • 分享至 

  • xImage
  •  

這系列文中會希望能用Web相關技術做XR應用的小作品。在發想XR作品時也許因為久未接觸XR世界而一片空白;或也許有很多想法,靈感可能來自於科幻作品、概念產品或對未來的想像。以下想介紹幾款現今經典的XR應用的產品,來加速對目前XR發展的瞭解,或能從中得到一些啟發或靈感。

現在XR硬體怎麼進行操作

要看到XR的世界會因為不同硬體媒介而達到截然不同的效果,一個XR他應該要比較偏向AR還是VR的體驗,也跟硬體有很大的關係,否則就會變得只是用平面螢幕在看3D畫面,完全稱不上XR體驗了。
VR要讓你進入一個虛擬的空間,就必須使用頭戴裝置或智慧眼鏡把眼睛遮蔽讓你身歷其境。
AR必須要與現實結合,那就必定要鏡頭拍攝真實世界,那麼除了頭戴裝置、智慧眼鏡,手機也是很好發揮的。

XR體驗也包含身體整體的追蹤,大部分的頭戴裝都是包含頭部跟手部追蹤(包含手指頭的彎曲偵測),除了位置也包含傾斜角度等。次多的是眼部追蹤或臉部追蹤;另外還有額外的裝置可以達到全身追蹤整身的動作,通常是使用裝備第三方的追蹤器在手臂、軀幹、腿部、腳踝等處來達到位置的追蹤,讓使用者可以隨心所欲、自由的控制Avartar(你所控制的角色)甚至實現跳舞。
頭戴裝置通常會內建配手部控制器,大部分的應用都只需追蹤頭部和手部的位置。頭戴裝置主要有分成兩種,PCVR和一體機:

  • 一體機(Standalone VR):直接戴上它連上wifi就能暢遊XR世界的入門友善道具,大部分的處理都已經非常優秀有沉浸感,除了拿控制器,Quest Pro、Quest 3等都有內建手部追蹤,近期「混合模式 (Hybrid Mode)」成為市場主流,現在大部分的一體機也都支援PCVR。
  • PCVR:由電腦運算和渲染,頭戴裝置負責顯示和追蹤頭部和手部,因為電腦可以配到比一體機更優秀的硬體,所以畫面精緻度和細節表現有機會壓倒性的勝於一體機的表現。連線方式有有線 (Link Cable)和無線,無線的連結方式是在電腦跟頭戴裝置都安裝該軟體並連結同一個wifi來連線,像是有Steam VR或Meta Quest Link等,操作都很直覺方便。

XR軟體應用

剛剛提到以前只能拿控制器,現今出現內建手部追蹤,應用也更多元化。常見的有
健身系:逼真的拳擊、球類以外,也有滑雪、攀岩等。
音樂系:拿根自家的筷子就能手部追蹤跟著莫札特學指揮交響樂團,指揮的手勢是跟現實一樣的,與其說寓教於樂更像是實現當指揮家的感覺。或是彈奏空氣吉他、演奏空氣伸縮號,就像你想像的,是用手指彈奏或用手擺在相對的位置來演奏。
RPG系:實現詠唱用手丟出火焰球;靠手勢觸發攻擊或防禦;雙手擺出射箭的姿勢當個弓箭手;或是甩手必來伐樹、採礦來採集資源等。
這些在XR世界互動的感覺跟只透過平面的螢幕互動是完全不同維度的,因此應用程式所需要照顧到的層面也是完全不同的!在開始之前一定知道

一個成功的XR產品極重要的必要條件

舒適性和沉浸感
XR最大的敵人就是VR暈或是3D暈(Motion Sickness),要達成避免3D暈必須要高幀率(FPS)和低延遲,才能達成轉頭時,畫面必須「立即」跟上,否則任何可被感知的延遲都會造成大腦的視覺和前庭感覺系統衝突而令人不適,同時也比須保持解析度在一定程度,不能過於過於模糊,否則視覺會處於持續解析的狀態非常容易疲勞。

互動直覺且易用
優秀的XR產品能讓使用著本能性的與之互動。使用者靠近可互動的物品時,該物品會高亮或周圍發光顯示,可以”伸手”去按按鈕或用手”抓取”物品,且拿取的時候會有合適的重力、聲音等反饋實感,以符合現實世界的物理操作和反饋。UI/UX更是需要考量跟環境如何相容,在XR常見的會是顯示在玩家的手腕上、告示板上。

在了解了現今目前軟硬體該有的考量後,如果想做一個跨支援跨裝置且能用web開發經驗的AR作品
該怎麼選擇技術來實現這件事呢?


上一篇
[Day03] 現今的XR硬體和XR軟體應用的樣子
下一篇
[Day05] 開發WebXR的底層渲染技術WebGL和WebGPU是什麼?關鍵差別?
系列文
WebXR未來新視界:Babylon.js打造Web的VR/AR/XR體驗25
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
janshawn
iT邦新手 5 級 ‧ 2025-09-26 08:41:50

這篇內容好像和上篇重複了~

阿,真的耶, 謝謝你
這邊補上:

如何開發XR

就如同現在我們使用手機會有APP或網頁,XR也有APP或網頁,XR APP主流是用Unity和Unreal Engine。順帶一提,Apple vision pro需要用他自己出的sdk開發。XR APP固然有更多發揮空間,像是更多的控制權限、更優秀的效能和完成的引擎。APP的缺點是需要透過應用程式商店下載安裝,所以就如同手機APP,內容的更新和上架都需要透過個別的應用程式商店,然而現在大家都想搶當XR的首選平台,目前是百家爭鳴的狀況,有Meta Quest Store(for Quest主機)、Pico Store(for Pico 主機)、PlayStation Store (for PS主機)、 visionOS 的 App Store(for Apple vision pro)、Viveport(HTC 官方商店可)、SteamVR(PCVR可用steamVR連線主機),上述只有最後兩個(Viveport和SteamVR)可以跨品牌,可想而知會需要花比較多力氣在不同平台上架及更新。

WebXR應用的優勢--只需用有支援WebXR的瀏覽器版本開啟網頁就能直接載入,如果是在頭戴裝置中是可以直接選擇VR顯示,網頁的特性大家都很熟悉,像是跨裝置能力強,更新快速不須打包等,以及他的缺點如不比原生APP能控制硬體,沒有能力自己儲存資料等。

開發方式 主要語言 特點
Unity C# 生態成熟、跨平台性強、資源豐富
Unreal Engine C++ / Blueprints 頂級畫質、視覺化腳本強大,但學習曲線陡峭、對硬體要求高
JavaScript (WebXR) JavaScript / TypeScript 無須安裝,開發快速、跨平台只要能開網頁就能跨裝置開啟
原生 SDK (如 visionOS) Swift / C++ 效能極致、可存取最新硬體功能,但僅限特定平台、開發複雜度高

關於XR,Microsoft這邊有相關的第一步教學
https://learn.microsoft.com/zh-tw/windows/mixed-reality/develop/development

如果想了解Unity 或 Unreal要怎麼開始進行第一步來開發XR,也很推薦可以跟著Microsoft教學做做看。而接下來我們會來聚焦在WebXR要如何開發上,並且會從易到難的安排順序。

WebXR

關於WebXR有件重要的事要先釐清,目前坊間對於”WebXR”這個名稱會有兩種完全不同的東西,目前只能透過上下文來判斷人家寫的是哪一種:

一種是很直觀的指用Web技術開發的XR應用程式

另一種是指**WebXR Device API (**簡稱WebXR),是開發WebXR的核心,他的幾個重要功能有:

  • 檢測XR設備
  • 與XR設備溝通並取得相對應的位置和狀態
  • 在XR設備以合適幀率顯示並與現實環境協調畫面
  • 主動退出或監聽退出是件

也就是要讓XR好好運行在瀏覽器上的重要API!只需要點擊一個連結或掃描QR Code,瀏覽器就會直接啟動 VR/AR 體驗。由 W3C 的「沉浸式網頁工作組」共同制定並於2023年提升為正式的標準。制定成員包括了 Google, Meta, Microsoft, Apple, Mozilla 等所有主流科技巨頭。大可以放心它的標準化和跨平台特性,使用頭戴裝置時可以用VR開啟, 也可以在支援WeXR的瀏覽器版本用手機以 AR 模式開啟。WebXR顧名思義可以理解是可以跑在網頁上的,所以不管是頭戴裝置還是行動裝置,只要是能把網頁打開,基本上都是可以運行的。

因為做一個跨支援跨裝置且能用前端開發經驗的AR作品。那麼這樣比較下來,WebXR會比較符合我的需求,所以接下來就要開始了解要怎麼開始做WebXR應用軟體囉!

我要留言

立即登入留言